Estoy aprendiendo el comportamiento de this palabra clave en la clase ES6 , antes de saber que this palabra clave en funciones de objetos representa lo siguiente:

• En función regular , this representa el objeto actual .
• En la función de flecha , this representa el objeto global (ventana) .

Entonces, cuando trabajé con la clase ES6, veo que Class se comporta como Object cuando se cumple en JavaScript, veo este comportamiento en la consola al poner this en un método de clase y this representaba la clase actual como Object así como su prototipo era Object

Para la comprensión conceptual, hago una función de flecha foo() y una función regular bar() en una clase AppComponent e imprimo this palabra clave de la siguiente manera:

Esperaba que this en foo() representara un objeto global (ventana) , porque está dentro de la función Flecha en el Object y, por otro lado, en la barra() this representa el objeto actual debido a la función Regular dentro del object que es AppComponent , pero el resultado fue:

Se espera la salida de bar() .

La salida de foo() es inesperada.

Entonces, mi pregunta es por qué this representa el objeto Appcomnent actual en lugar del objeto global (ventana), porque está dentro de la arrow function en el objeto .

Corríjame si mi concepto no es correcto en la pregunta, si es correcto, ¿por qué veo el resultado inesperado? Le agradecería mucho su contribución.